<template>
  <lay-container :fluid="true" style="padding: 10px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <lay-button type="primary">百搭按钮</lay-button>
          <lay-button type="primary">百搭按钮</lay-button>
          <lay-button type="primary">百搭按钮</lay-button>
          <lay-button type="primary">百搭按钮</lay-button>

        </lay-card>
      </lay-col>

      <lay-col :md="24">
        <lay-card v-for="(item,index)  in dataSource" :key="index" >

          <template v-slot:title>
            <span style="font-size: 16px;font-weight: bold">{{ item.name }}</span>
          </template>
          <lay-row class="card">

            <lay-col  :md="2" v-for="(item, index) in item.hostelVos" :key="index" class="my-div" @click="toLive(item)" >
              {{ item.name }}
            </lay-col>


          </lay-row>


        </lay-card>
      </lay-col>
    </lay-row>

  </lay-container>
</template>

<script setup lang="ts">
import {layer} from '@layui/layer-vue'
import {ref, reactive, onMounted} from 'vue'
import {getFloorLevelByFloorId} from "@/api/business/floorLevel";
import {useRoute, useRouter} from 'vue-router';


const route = useRoute();
const router = useRouter();


onMounted(() => {
  const paramValue = route.query.floorId; // 访问传递的参数
  searchQuery.value.floorId = paramValue;

  fetchData();
})

const searchQuery = ref({
  floorId: '',
});

//查询当前页数据
const fetchData = () => {
  getFloorLevelByFloorId(searchQuery.value).then(res => {
    if (res.code == 0 && res.data.length > 0) {
      dataSource.value = res.data;
    }
  })
}

const dataSource = ref();

const list = ref(new Array(20).fill(null));

function toLive(obj: any) {
  router.push({
    path: '/hostel/live',
    query: {
      hostelId: obj.id,
      hostelName: obj.name
    }
  });
}

</script>

<style scoped>
.layui-card-body .layui-row .card{
  background-color: rgb(242,242,242);
}
.my-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #fff;
  margin-left: 8px;
  /*background-color: #16b777;*/
  background-color: #E0EEE0;
  /*color: rgb(51,122,183);*/
  /*padding:10px;*/

  color: black;
  /*padding:30px;*/
  border-radius: 2px;
  border-radius: var(--global-border-radius)
}
</style>